<template>
    <div class="shop_info">
        <!-- 结算信息-->
        <div class="enterise_info_title">请选择企业类型</div>
        <div class="enterise_info_tab">
            <van-button class="enterise_info_tab_btn"
                v-for="item, index in info.company_type == 3 ? tabList1 : info.company_type == 1 ? tabList2 : tabList" plain
                type="info" @click="tabClick(item.id)" :key="index"
                :style="{ background: current == item.id ? '#e9f0fb' : '#FFF' }">{{
                    item.name
                }}</van-button>
        </div>
        <div>
            <corporate-account v-if="current == 0" @corporate="getCorporateAccount" :settle="info"
                @settle="goBack"></corporate-account>
            <no-corporate-account v-if="current == 1" @noCorporate="getNoCorporateAccount" :settle="info"
                @settle="goBack"></no-corporate-account>
            <public-account v-if="current == 2" @public="getPublicAccount" :settle="info"
                @settle="goBack"></public-account>
        </div>

    </div>
</template>
<script>
import corporateAccount from './corporateAccount.vue'
import noCorporateAccount from './noCorporateAccount.vue'
import publicAccount from './publicAccount.vue'
export default ({
    props: ['info'],
    components: { corporateAccount, noCorporateAccount, publicAccount },
    data() {
        return {
            username: '',
            uploader: [],
            current: 0,
            tabList: [
                {
                    id: 0,
                    name: '对私法人账户'
                },
                {
                    id: 1,
                    name: '对私非法人账户'
                },
                {
                    id: 2,
                    name: '对公账户'
                }
            ],
            tabList1: [
                {
                    id: 0,
                    name: '对私法人账户'
                },
            ],
            tabList2: [
                {
                    id: 2,
                    name: '对公账户'
                }
            ]
        }
    },
    mounted() {
        window.scrollTo(0, 0)
        console.log(this.info);
        
        setTimeout(() => {
            let companyType = this.info.company_type;
            let accountType = this.info.account_data.type;

            if (companyType === 2) {
                this.current = (accountType === 1) ? 0 : (accountType === 2) ? 1 : (accountType === 3) ? 2: 0;
            } else if (companyType === 1) {
                this.current = 2;
            } else if (companyType === 3) {
                this.current = 0;
            } else {
                this.current = 0; // 默认值
            }

        }, 100)
    },
    methods: {
        // 切换企业类型
        tabClick(id) {
            this.current = id
        },
        // 对私法人账户
        getCorporateAccount(values, selectAreaList, param) {

            let params = {
                // ...values,
                ...param,
                bank_name: values.bank_name,
                branch_name: values.branch_name,
                account: values.account,
                phone: values.phone,
                front_url: values.front_url.map(item => item.url)[0],
                back_url: values.back_url.map(item => item.url)[0],
                owner_hold_url: values.owner_hold_url.map(item => item.url)[0],
                province_code: selectAreaList[0],
                city_code: selectAreaList[1],
                county_code: selectAreaList[2],

            }
            this.$emit("settle", params, 0)
        },
        // 对私非法人账户
        getNoCorporateAccount(values, selectAreaList, param, settler_data) {
            // console.log('submit', values);
            let params = {
                // ...values,
                ...param,
                // ...settler_data,
                bank_name: values.bank_name,
                branch_name: values.branch_name,
                account: values.account,
                phone: values.phone,
                // authorize_url: values.authorize_url.map(item => item.url)[0],
                front_url: values.card_url.map(item => item.url)[0],
                back_url: values.bank_back_url.map(item => item.url)[0],
                owner_hold_url: values.owner_hold_url.map(item => item.url)[0],
                province_code: selectAreaList[0],
                city_code: selectAreaList[1],
                county_code: selectAreaList[2],
            }
            let data = {
                ...settler_data,
                front_url: values.front_url.map(item => item.url)[0],
                back_url: values.back_url.map(item => item.url)[0]
            }
            this.$emit("settle", params, data)

        },
        // 对公账户
        getPublicAccount(values, selectAreaList, param) {

            let params = {
                // ...values,
                ...param,
                bank_name: values.bank_name,
                branch_name: values.branch_name,
                account: values.account,
                // account:values.account,
                license_url: values.front_url.map(item => item.url)[0],
                province_code: selectAreaList[0],
                city_code: selectAreaList[1],
                county_code: selectAreaList[2],
            }
            this.$emit("settle", params, 0)
        },
        goBack() {
            this.$emit("backBtn", 1)
        }
    },
})
</script>
<style scoped lang="scss">
.enterise_info_title {
    font-size: 0.28rem;
    font-weight: bold;
    background: #fff;
    padding: 0.32rem;

    span {
        color: red;
    }
}

.enterise_info_tab {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.1rem;

    &_btn {
        width: 32%;
        // font-size: 0.24rem;
        border-radius: 0.15rem;
        padding: 0 0.1rem;
    }
}

.enterise_info_upload_title {
    font-size: 0.28rem;
    font-weight: bold;
    background: #fff;
    // padding: 0.2rem;
    text-align: center;
}

.shop_upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0.2rem;

    .shop_upload_text {
        line-height: 0.5rem;

        div:nth-child(1) {
            font-size: 0.3rem;
            font-weight: bold;
        }

        div:nth-child(2) {
            font-size: 0.28rem;
            font-weight: 500;
        }

        div:nth-child(3) {
            font-size: 0.24rem;
            font-weight: 500;
            color: red;
        }
    }
}
</style>